import { Button, Flex, message, Modal, type TableColumnsType } from "antd"
import { runJob, type DataItem } from "./api";
import { NavLink } from "react-router";
import copy from "copy-to-clipboard";

interface ColumnsProps {
  handleEdit: (data: DataItem) => void
  handleView: (data: DataItem) => void
  handleLike: (data: DataItem) => void
  handleCollect: (data: DataItem) => void
}
export const columns: (props: ColumnsProps) => TableColumnsType = ({ handleEdit, handleView, handleLike, handleCollect }) => [
  {
    title: '姓名',
    dataIndex: 'realName',
    key: 'realName',
    width: 100,
  },
  {
    title: '域账号',
    dataIndex: 'userName',
    key: 'userName',
    width: 100,
  },
  {
    title: 'token',
    dataIndex: 'token',
    key: 'token',
    width: 200,
    render: (text: string) => (
      <div
        title={text}
        style={{
          wordBreak: 'break-all',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          maxWidth: '200px',
          cursor: 'pointer',
          color: '#1890ff' // 可视化为可点击样式
        }}
        onClick={() => {
          copy(text);
          message.success('已复制到剪贴板');
        }}
      >
        {text}
      </div>
    )
  },
  {
    title: 'token添加时间',
    dataIndex: 'tokenDate',
    key: 'tokenDate',
  },
  {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions',
    render: (_: any, row: any) => {
      return <Flex>
        <Button variant="text" type="text" size="small" color="orange" onClick={() => {
          Modal.confirm({
            title: '确定执行',
            async onOk() {
              try {
               runJob(row.userName)
              } catch (error) {
                console.error(error);
              }
            },
          });
        }}>执行刷分</Button>
        <Button size="small" type="link" onClick={() => handleEdit(row)}>编辑</Button>
        <Button size="small" type="link" onClick={() => handleView(row)}>阅读</Button>
        <Button size="small" type="link" onClick={() => handleLike(row)}>点赞</Button>
        <Button size="small" type="link" onClick={() => handleCollect(row)}>收藏</Button>
        <Button size="small" type="link"><NavLink to={`/layout/token-manager/detail?userName=${row.userName}`}>详情</NavLink></Button>
        {/* <Button size="small" danger type="link" onClick={() => {
          Modal.confirm({
            title: '确定删除',
            async onOk() {
              try {
                await deleteToken(row.userName)
              } catch (error) {
                console.error(error);
              }
            },
          });
        }}>删除</Button> */}
      </Flex>
    },
  },
];
